<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div style="width: 100%; text-align: center;">
        <h2>表白墙</h2>
        谁 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<input id="username"> <p></p>
        对谁 &nbsp;&nbsp;&nbsp;:<input id="touser"> <p></p>
        说什么 :<input id="tmsg"> <p></p>
        <input type="button" value="提 交" onclick = "mysub()"> <p></p>
        <div id="div_allmsg">

            </div>
    </div>
    <script>
        function mysub() {
            //1.非空校验
            var inpUser = jQuery("#username");
            var inpTousername = jQuery("#touser");
            var inpMsg = jQuery("#tmsg");
            if(inpUser.val().trim() == "") {
                alert("请输入你的名字！");
                inpUser.focus();
                return;
            }
            if(inpTousername.val().trim() == "") {
                alert("请输入对方的名字！");
                inpTousername.focus();
                return;
            }
            if(inpMsg.val().trim() == "") {
                alert("请输入信息！");
                inpMsg.focus();
                return;
            }
            //2.将内容展示
            jQuery("#div_allmsg").append(inpUser.val()+"对"+inpTousername.val()+"说: "+inpMsg.val()+"<p></p>");
            //3.清空输入内容
            inpUser.val("");
            inpTousername.val("");
            inpMsg.val("");
        }
        </script>
</body>
</html>